<template>
  <div class="dashboard">
    <SearchForm
      ref="searchFormcen"
      :data="propForm"
      :dataHandler="propHandler"
    />
    <PublicTable
      :isLoading="isLoading"
      :tableInfo="tableInfo"
      :pagination="true"
      :pageData="pageData"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <Dialog ref="dialog" :title="title" :buttons="buttons" @closeDialog="closeDialog" width="540px">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" label-position="rigth">
        <el-form-item label="公司名:" prop="companyName">
          <el-input placeholder="请输入公司名" v-model="form.companyName" size="mini" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="负责人:" prop="personInCharge">
          <el-input placeholder="请输入公司负责人" v-model="form.personInCharge" size="mini" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input placeholder="请输入手机号" v-model="form.phone" size="mini" style="width: 400px"></el-input>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script>
import { listPage, add, modify, companyDelete } from "../../api/companyMng";
export default {
  data() {
    return {
      propForm: [
        {
          name: "公司名称",
          type: "input",
          key: "companyName",
          placeholder: "请输入公司名称",
          required: false,
          width: "100px",
        },
        {
          type: "button",
          button: [
            {
              name: "搜索",
              color: "primary",
              method: (c) => {
                this.searchData(c)
              },
            },
            {
              name: "清空",
              color: "info",
              method: (c) => {
                this.searchData(c, true)
              },
              clean: true,
            },
          ],
        },
      ],
      propHandler: [
        {
				  info: "新增公司",
				  icon: "el-icon-plus",
				  color: "#3370ff",
				  method: (c) => {
            this.title = '新增公司'
				    this.$refs.dialog.show()
				  },
				}, 
      ],
      tableInfo: {
        selectable: true,
        tableConfig: [
          {
            label: "ID",
            prop: "id",
          },
          {
            label: "公司名称",
            prop: "companyName",
          },
          {
            label: "负责人",
            prop: "personInCharge",
          },
          {
            label: "联系电话",
            prop: "phone",
          },
          {
            label: "公司状态",
            prop: "statusVal",
          },
          {
            label: "创建时间",
            prop: "createTime",
            width: 180
          },
          {
            type: "buttons",
            label: "操作",
            width: "200px",
            align: "center",
            fixed: "right",
            list: [
              {
                type: "success",
                text: "修 改",
                show: (row) => {
                  return true
                },
                events: (row) => {
                  this.form = row
                  this.title = '修改公司'
                  this.$refs.dialog.show()
                },
              },
              {
                type: "primary",
                text: "启 用",
                show: (row) => {
                  return row.status
                },
                events: (row) => {
                  row.status = 0
                  modify(row).then((res) => {
                    if (res.code == 200) {
                      this.$message.success(res.message)
                      this.getList()
                    } else this.$message.error(res.message)
                  })
                },
              },
              {
                type: "primary",
                text: "禁 用",
                show: (row) => {
                  return !row.status
                },
                events: (row) => {
                  row.status = 1
                  modify(row).then((res) => {
                    if (res.code == 200) {
                      this.$message.success(res.message)
                      this.getList()
                    } else this.$message.error(res.message)
                  })
                },
              },
              {
                type: "danger",
                text: "删 除",
                show: (row) => {
                  return row.status
                },
                events: (row) => {
                  this.$confirm('确定删除该公司?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    companyDelete(row.id).then(res => {
                      if (res.code == 200) {
                        this.$message.success(res.message)
                        this.getList()
                      } else this.$message.error(res.message)
                    })
                  })
                },
              }
            ],
          },
        ],
        tableData: [],
      },
      pageData: {
        pindex: 1,
        psize: 10,
        total: 0,
      },
      searchDatas: {
        companyName: "",
      },
	    isLoading: false,
      title: '新增公司',
      buttons: [
        {
          type: "primary",
          title: "确认",
          loading: false,
          method: () => {
            this.submit()
          },
        },
        {
          title: "取消",
          method: () => {
            this.closeDialog()
            this.$refs.dialog.show()
          },
        },
      ],
      form: {
        companyName: "",
        personInCharge: "",
        phone: '',
      },
      rules: {
        companyName: { required: true, message: "请输入会议室名", trigger: ['blur', 'change'] },
        personInCharge: { required: true, message: "请输入公司负责人", trigger: ['blur', 'change'] },
        phone: [{ required: true, message: "请输入手机号", trigger: ['blur', 'change']},
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] },
        ],
      },
      options: [],
      roomOptions: []
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    //搜索
    searchData(c, close) {
      this.searchDatas.companyName = close ? "" : c.companyName;
      this.pageData.pindex = 1;
      this.getList();
    },
    //列表
    getList(tag) {
      let params = {
        page: this.pageData.pindex,
        pageSize: this.pageData.psize,
        ...this.searchDatas,
      };
      this.isLoading = true;
      listPage(params).then((res) => {
        this.isLoading = false;        
        if (res.code == 200) {
          this.tableInfo.tableData = res.data.data;
          this.tableInfo.tableData.forEach(i => {
            i.statusVal = i.status == 0 ? '正常' :  '禁用'
          })
          this.pageData.total = res.data.total || 0;
        } else this.$message.error(res.message);
      });
    },
    //控制翻页
    handleCurrentChange(v) {
      this.pageData.pindex = v;
      this.getList();
    },
    //控制每页多少条
    handleSizeChange(num) {
      this.pageData.psize = num;
      this.getList();
    },
    //保存
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let URL= this.title === '修改公司' ? modify : add
          this.buttons[0].loading = true
          URL(this.form).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.message)
              this.closeDialog()
              this.$refs.dialog.show()
              this.getList()
            } else this.$message.error(res.message)
            this.buttons[0].loading = false
            
          })
        }
      })
    },
    closeDialog() {
      this.form = {
        companyName: "",
        personInCharge: "",
        phone: '',
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  padding: 20px;
}
</style>
